<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
	<div class="container">
		<div class="addClue">
			<el-button type="success" @click="addClueOne">添加线索</el-button>
			<el-button type="danger" @click="addClues">导入线索</el-button>
			<el-button type="warning" style="float: right;" @click="uploadClues">导出线索文件</el-button>
		</div>
		<!-- 添加线索的弹窗 -->
		<el-dialog v-model="showAddClueOneDialog" title="添加线索数据" width="600px">
			<!-- 输入框 -->
			<el-form :model="formInfo">
				<el-form-item label="真实姓名：" label-width="120" class="dialogInputMargin" required>
					<el-input v-model.trim="formInfo.customerName" placeholder="请填写真实姓名"></el-input>
				</el-form-item>
				<!-- 单选 -->
				<el-form-item label="性别：" label-width="120" class="dialogInputMargin" required>
					<el-radio-group v-model.trim="formInfo.gender" class="ml-4">
						<el-radio label="1" size="large">男</el-radio>
						<el-radio label="2" size="large">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<!-- 时间： 日期选择 -->
				<el-form-item label="年龄：" label-width="120" class="dialogInputMargin" required>
					<el-input v-model.trim="formInfo.age" placeholder="请填写年龄"></el-input>
				</el-form-item>
				<!-- 学历  单选 -->
				<el-form-item label="学历：" label-width="120" class="dialogInputMargin" required>
					<el-select v-model.trim="formInfo.education" placeholder="请选择学历">
						<el-option label="初中" value="初中" />
						<el-option label="高中" value="高中" />
						<el-option label="专科" value="专科" />
						<el-option label="本科" value="本科" />
						<el-option label="硕士" value="硕士" />
						<el-option label="博士" value="博士" />
					</el-select>
				</el-form-item>
				<!-- 单选 -->
				<el-form-item label="职业：" label-width="120" class="dialogInputMargin" required>
					<el-select v-model.trim="formInfo.occupation" placeholder="请选择职业">
						<el-option v-for="(item,index) in occupationList" :label="item" :value="item" />
					</el-select>
				</el-form-item>
				<!-- 输入框 -->
				<el-form-item label="联系电话：" label-width="120" class="dialogInputMargin" required>
					<el-input v-model.trim="formInfo.contactNumber" placeholder="请填写联系电话"></el-input>
				</el-form-item>
				<!-- 单选框 -->
				<el-form-item label="意向产品：" label-width="120" class="dialogInputMargin" required>
					<el-select v-model.number="formInfo.intentionalProductId" placeholder="请选择意向产品"
						@click.native="getProductInfo">
						<el-option v-for="(item,index) in intentProductList" :label="item.productName"
							:value="item.productId" />
					</el-select>
				</el-form-item>
				<!-- 输入框 -->
				<el-form-item label="省份：" label-width="120" class="dialogInputMargin" required>
					<el-input v-model.trim="formInfo.province" placeholder="请填写省份"></el-input>
				</el-form-item>

				<!-- 非必填项 -->
				<!-- 输入框 -->
				<el-form-item label="城市：" label-width="120" class="dialogInputMargin">
					<el-input v-model.trim="formInfo.city" placeholder="请填写城市"></el-input>
				</el-form-item>
				<!-- 输入框 -->
				<el-form-item label="邮箱：" label-width="120" class="dialogInputMargin">
					<el-input v-model.trim="formInfo.email" placeholder="请填写邮箱"></el-input>
				</el-form-item>
				<!-- 输入框 -->
				<el-form-item label="旅游人数：" label-width="120" class="dialogInputMargin">
					<el-input v-model.trim="formInfo.travelersCount" placeholder="请填写旅游人数"></el-input>
				</el-form-item>
				<!-- 单选框 -->
				<el-form-item label="出行类型：" label-width="120" class="dialogInputMargin">
					<el-select v-model.trim="formInfo.travelType" placeholder="请选择出行类型">
						<!-- 个人，团建，家人，情侣 -->
						<el-option label="个人" value="个人" />
						<el-option label="团建" value="团建" />
						<el-option label="家人" value="家人" />
						<el-option label="情侣" value="情侣" />
						<el-option label="其他" value="其他" />
					</el-select>
				</el-form-item>
				<!-- 单选框 -->
				<el-form-item label="线索来源：" label-width="120" class="dialogInputMargin">
					<el-select v-model.trim="formInfo.clueSource" placeholder="请选择线索来源">
						<!-- 个人，团建，家人，情侣 -->
						<el-option label="微信" value="微信" />
						<el-option label="直播" value="直播" />
						<el-option label="公众号" value="公众号" />
						<el-option label="线下推广" value="线下推广" />
						<el-option label="官网" value="官网" />
						<el-option label="其他" value="其他" />
					</el-select>
				</el-form-item>

			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="concelItem(0)">取消</el-button>
					<el-button @click="concelItem(2)">重置</el-button>
					<el-button type="primary" @click="concelItem(1)">添加</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 导入线索的弹窗 -->
		<el-dialog v-model="dialogFormVisible" title="批量添加线索数据" width="400px" destroy-on-close>
			<el-form-item>
				<span>导入数据之前，<span class="writing-color"> 请参考下载模板 </span>文件中的模板</span>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="downloadTemplate">下载模板</el-button>
			</el-form-item>
			<el-form-item>
				<span>按照模板格式<span class="writing-color"> 批量导入数据 </span></span>
			</el-form-item>
			<el-form-item>
				<el-upload class="upload-demo" name="file" action="" ref="upload" :http-request="uploadSectionFile"
					:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
					:limit="1" :on-exceed="handleExceed" :on-error="uploadFileError" :on-success="uploadFileSuccess"
					:file-list="fileList">
					<!-- <el-button size="small" type="primary">点击上传</el-button> -->
					<el-button type="warning">导入数据</el-button>
					<div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div>
				</el-upload>
			</el-form-item>


		</el-dialog>

		<!-- 分隔线 -->
		<el-divider />

		<div>
			<!-- tab栏 -->
			<el-tabs type="border-card" v-model="activeName2" @tab-click="handleClick">
				<el-tab-pane label="未分配" name="first-ta">
					<DisassignedClue :list="disassignedClueList" :currentPage="currentPage"
						@changeClue="changeDisassignedClue" @queryObject="changeQueryConditon" />
					<!-- 分隔线 -->
					<el-divider />

					<!-- 分页按钮 -->
					<el-button v-if="currentPage == 1" type="info" @click="noPage" disabled>上一页</el-button>
					<el-button v-else type="primary" @click="toPrevious">上一页</el-button>
					<span class="source">{{currentPage}}</span>

					<el-button v-if="currentPage == pages" type="info" @click="noPage" disabled>下一页</el-button>
					<el-button v-else type="primary" @click="toNext">下一页</el-button>

					<span class="source">总记录数：{{total}}</span>
					<span class="source">总页数：{{pages}}</span>
				</el-tab-pane>

				<el-tab-pane label="已分配" name="second-ta">
					<!-- @selectedClues="selectedClues" -->
					<AssignedClue :list="assignedClueList" @changeClue="changeAssignedClue" />
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<!-- js相关 -->
<script>
	import axios from "axios";
	import AssignedClue from "../components/assignedClue.vue"
	import DisassignedClue from "../components/disassignedClue.vue"

	export default {
		name: 'Table',
		components: {
			AssignedClue,
			DisassignedClue,
		},
		data() {
			return {
				// 未分配的线索数组
				disassignedClueList: [],
				
				// 已完成进行分配的线索数组
				// assignedClueList: [],
				assignedClue: {},
				
				// 添加单条线索的输入框 - 对象
				formInfo: {},
				// 是否显示单条线索的输入框
				showAddClueOneDialog: false,
				// 导入excel文件的弹窗
				dialogFormVisible: false,
				
				// 意向产品数组
				intentProductList: [],
				upload: '',
				fileList: [], //上传的文件列表

				// 分页
				currentPage: 1,
				total: 0,
				pages: 0,

				// 是否带条件查询
				isCondition: 0, // 0：表示无条件， 1： 有条件

				// 多条件查询的查询条件
				name: '', // 姓名
				minAge: '', // 最小年龄
				maxAge: '', // 最大年龄
				province: '', // 省份
				product: '', // 产品
				minNumber: '', // 最小人数（旅游人数）
				maxNumber: '', // 最大人数
				source: '', // 线索来源
				
				// 选中的数据列表；
				selectedList: [],
				
				activeName2: 'first-ta', // tab栏
				tabId: '', // tab栏当前显示 // tab-first-ta // tab-second-ta
			}
		},
		// 声明方法
		methods: {
			// tab导航栏
			handleClick: function (tab, event) {
			   this.tabId = event.target.getAttribute('id'); //获取到当前元素的id
			},
			// 获取上传的文件
			//自定义上传
			uploadSectionFile(param) {
				var fileObj = param.file;
				var form = new FormData();
				// 文件对象
				form.append("file", fileObj);
				this.$axios.post('http://localhost:6060/clue/excel/mutipartFile', form).then(res => {
					if (res.data == true) {
						this.dialogFormVisible = false;
						ElMessage({
							message: '数据导入成功！',
							type: 'success',
						})
					} else {
						this.dialogFormVisible = false;
						this.fileList = [];
						ElMessage.error('数据导入失败！');
					}

				}).catch(({
					err
				}) => {
					this.dialogFormVisible = false;
					this.fileList = [];
					ElMessage.error('数据导入失败！')
				})
			},
			// 日期格式的转化
			getBirthDate(date) {
				this.formInfo.birthday = date;
			},
			changeDisassignedClue(list,selectedList) {
				// 未分配的数据；-- 刷新
				this.selectAssignedClues(0);
				// this.disassignedClueList = list;
				this.selectedList = [];
				this.selectedList = selectedList;
			},
			// 列表选中的信息
			// selectedClues(list) {
			// 	alert("父组件传入的值：" + list);
			// 	this.selectedList = [];
			// 	this.selectedList = list;
			// },
			// 修改查询条件
			changeQueryConditon(obj) {
				this.name = obj.name; // 姓名
				this.minAge = obj.minAge; // 最小年龄
				this.maxAge = obj.maxAge; // 最大年龄
				this.province = obj.province; // 省份
				this.product = obj.product; // 产品
				this.minNumber = obj.minNumber; // 最小人数（旅游人数）
				this.maxNumber = obj.maxNumber; // 最大人数
				this.source = obj.source; // 线索来源
				this.isCondition = 1;
				this.currentPage = 1;
				this.selectAssignedClues(0);
			},
			changeAssignedClue(obj) {
				this.assignedClue = obj;
				console.log("已完成分配的线索信息：" + this.assignedClue);
			},
			// 开启添加线索的弹窗
			addClueOne() {
				this.showAddClueOneDialog = true;
			},
			// 关闭弹窗
			concelItem(index) {
				if (index == 0) {
					// 取消添加
					// 清空数据；
					this.formInfo = {};
					// 退出弹窗；
					this.showAddClueOneDialog = false;
				} else if (index == 1) {
					// 添加线索
					let obj = {
						customerName: this.formInfo.customerName,
						gender: this.formInfo.gender,
						age: this.formInfo.age,
						education: this.formInfo.education,
						occupation: this.formInfo.occupation,
						contactNumber: this.formInfo.contactNumber,
						intentionalProductId: this.formInfo.intentionalProductId,
						province: this.formInfo.province,
						city: this.formInfo.city,
						email: this.formInfo.email,
						travelersCount: this.formInfo.travelersCount,
						travelType: this.formInfo.travelType,
						clueSource: this.formInfo.clueSource
					};
					this.$axios({
						url: 'clue/customerClue/addClueOne',
						method: 'post',
						headers: {
							"Content-Type": "application/json"
						},
						data: JSON.stringify(obj),
					}).then(res => {
						if (res.data == true) {
							ElMessage({
								message: '添加线索成功',
								type: 'success',
							})
						} else {
							ElMessage.error('添加线索失败');
						}
						// 清空数据；
						this.formInfo = {};
					});
					// 退出弹窗；
					this.showAddClueOneDialog = false;
				} else if (index == 2) {
					// 输入框数据的重置： 清空数据即可
					this.formInfo = {};
				}
			},
			// 开始批量导入数据的弹窗
			addClues() {
				this.dialogFormVisible = true;
			},
			// 下载模板按钮；
			downloadTemplate() {
				window.location.href = axios.defaults.baseURL + "clue/template/upload";
			},
			getProductInfo() {
				this.$axios({
					url: "clue/travelProduct/selectAllProduct",
					methods: "post"
				}).then(res => {
					this.intentProductList = res.data;
				})
			},
			// 下一页
			toNext() {
				this.currentPage++;
				this.selectAssignedClues(0);
			},
			// 上一页
			toPrevious() {
				this.currentPage--;
				this.selectAssignedClues(0);
			},
			selectAssignedClues(index) {
				if (index == 0) {
					if (this.isCondition == 0) {
						// 无条件查询 - 未分配
						this.$axios({
							url: 'clue/customerClue/selectCluesList',
							methods: 'post',
							params: {
								condition: 0,
								currentPage: this.currentPage,
								orderBy: 0
							}
						}).then(res => {
							// 分页数据
							this.disassignedClueList = res.data.list;
							this.total = res.data.total;
							this.pages = res.data.pages;
						})
					} else if (this.isCondition == 1) {
						// 有条件查询；- 搜索
						this.$axios({
							url: 'clue/customerClue/conditinalQuery',
							method: 'post',
							params: {
								customerName: this.name,
								minAge: this.minAge,
								maxAge: this.maxAge,
								province: this.province,
								productId: this.product,
								minNumber: this.minNumber,
								maxNumber: this.maxNumber,
								clueSource: this.source,
								assign: 0,
								currentPage: this.currentPage,
							}
						}).then(res => {
							// 分页数据
							this.disassignedClueList = res.data.list;
							this.total = res.data.total;
							this.pages = res.data.pages;
							// this.changeDisassignedClue(res.data);
						});
					}

				} 
			},
			// 导出线索文件
			uploadClues() {
				if(this.tabId == "tab-first-ta") {
					// 写入未分配的线索数据
					this.$axios({
						url: 'clue/excel/writeData',
						method: 'post',
						params: {
							customerName: this.name,
							minAge: this.minAge,
							maxAge: this.maxAge,
							province: this.province,
							productId: this.product,
							minNumber: this.minNumber,
							maxNumber: this.maxNumber,
							clueSource: this.source,
							assign: 0,
							// currentPage: this.currentPage,
						}
					}).then(res => {
						if(res.data == true) {
							// 文件导出；
							window.location.href = axios.defaults.baseURL + "clue/excel/upload";
						} else {
							// alert("无数据，无法实现数据的导出");
							ElMessage({
							    message: '无数据，无法实现数据的导出',
							    type: 'warning',
							  })
							
						}
					}).err(error => {
						// alert("写入数据失败，无法实现数据的导入");
						ElMessage.error('写入数据失败，无法实现数据的导入');
					});
				} else {
					// 写入已分配的线索数据
					this.$axios({
						url: 'clue/excel/writeData',
						method: 'post',
						params: {
							customerName: this.assignedClue.customerName,
							minAge: this.assignedClue.minAge,
							maxAge: this.assignedClue.maxAge,
							province: this.assignedClue.province,
							productId: this.assignedClue.productId,
							minNumber: this.assignedClue.minNumber,
							maxNumber: this.assignedClue.maxNumber,
							clueSource: this.assignedClue.source,
							assign: 1,
						}
					}).then(res => {
						if(res.data == true) {
							// 文件导出；
							window.location.href = axios.defaults.baseURL + "clue/excel/upload";
						} else {
							// alert("无数据，无法实现数据的导出1");
							ElMessage({
							    message: '无数据，无法实现数据的导出',
							    type: 'warning',
							  })
						}
					}).err(error => {
						// alert("写入数据失败，无法实现数据的导入");
						ElMessage.error('写入数据失败，无法实现数据的导入');
					})
				}	
			},

		},
		created() {
			// 获取所有产品的信息
			this.$axios({
				url: "clue/travelProduct/selectAllProduct",
				methods: "post"
			}).then(res => {
				this.intentProductList = res.data;
			});

			// 查询未被分配的线索信息
			this.selectAssignedClues(0);

			// 已分配
			this.selectAssignedClues(1);
		}
	}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
	.dialogInputMargin {
		width: 500px;
	}

	.writing-color {
		color: red;
	}

	.el-upload__tip {
		margin-left: 20px;
	}

	.source {
		margin: 0px 20px;
	}
</style>